<template>
  <div class="p-2">
    <Row :gutter="[4, 16]">
      <Col :span="8">
      <Card title="蜜雪冰城">
        <div class="infoArea">
          <BasicForm @register="registerForm" />
          <div class="start_btn">
            <a-button type="warning" @click="handleWxPay('v3')">v3支付</a-button>&nbsp;
            <a-button type="warning" @click="handleWxPay('v2')">v2支付</a-button>&nbsp;
          </div>
          <BasicForm @register="registerForm1" />
          <div class="start_btn">
            <a-button type="success" @click="handleDownloadBill('tradebill')">交易账单</a-button>&nbsp;
            <a-button type="success" @click="handleDownloadBill('fundflowbill')">资金账单</a-button>&nbsp;
          </div>
        </div>
      </Card>
      </Col>
      <Col :span="16">
      <Card title="我的订单">
        <div class="infoArea">
          <WxOrder />
        </div>
      </Card>
      </Col>
    </Row>
  </div>
  <testParentSunModal @register="registerQrModal" @success="handleQrPaySuccess" />
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, unref, nextTick } from 'vue';
import { Card, Row, Col, Spin, Result, Button } from 'ant-design-vue';
import { BasicForm, FormSchema, useForm, } from '/@/components/Form/index';
import { useModal } from '/@/components/Modal';
import { formSchema, billFormSchema, } from './wxData';
import WxOrder from './wxOrder.vue';
import { downloadBill } from './wxApi';
import testParentSunModal from './components/qrModal.vue';
import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createConfirm, createMessage: $message } = useMessage();

//注册model
const [registerQrModal, { openModal: openQrPayModal }] = useModal();
//注册表单
const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
  labelWidth: 80,
  schemas: formSchema,
  showActionButtonGroup: false,
});
const [registerForm1, { validate: validate1, getFieldsValue: getBillFormFieldsValue1 }] = useForm({
  labelWidth: 80,
  schemas: billFormSchema,
  showActionButtonGroup: false,
});

// 默认执行一次
onMounted(async () => {
});

function handleWxPay(type) {
  // $message.info('支付类型......'+type);
  let formData = getFieldsValue();
  let params = Object.assign({}, formData);
  console.log('表单数据', params);
  openQrPayModal(true, {
    payData: params,
  });
}

/**
 * 测试父子组件传值
 */
function handleQrPaySuccess(params) {
  $message.info("支付成功");
}

/**
 * 账单下载
 */
async function handleDownloadBill(type) {
  // $message.info("账单下载：" + type);
  // validate1();
  let formData = getBillFormFieldsValue1();
  let billDate = formData.billDate;
  if (!billDate) {
    $message.error("请先选择日期");
    return;
  }
  let result = await downloadBill(billDate,type);
}

</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}

:deep(.ant-col) {
  width: 100%;
  padding-right: 0px;
}

.infoArea {
  // display: flex;
  // justify-content: space-between;
  // padding: 0 10%;
  width: 100%;
  // height: 100%;
  height: 500px;
}

.start_btn {
  padding: 10px 16px;
  text-align: center;
  margin-bottom: 16px;
}
</style>